<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://10.35.164.2/company/download (4)/font_2233695_6sc8g8kw1ak/iconfont.css">
    <link rel="stylesheet" href="http://10.35.164.2/company/css/cases_list.css">
    <link rel="stylesheet" href="http://10.35.164.2/company/css/current.css">
</head>
<body>
    <header>
        <div class="head_wrap_top">
            <div class="head_top">
                <ul class="nav">
                    <li><a href="http://10.35.164.2/company/index.html">网站首页</a></li>
                    <li><a href="#">传悦资源</a></li>
                    <li class="nav_onclick_li"><a href="http://10.35.164.2/company/cases_list.html">传悦案例</a></li>
                    <li ><a href="#">传悦服务</a></li>
                    <li><a href="http://10.35.164.2/company/solution_list.html">解决方案</a></li>
                    <li><a href="">需求提交</a></li>
                </ul>
                <div class="right_info">
                    <span class="iconfont icon-icon-"></span>
                    <span class="iconfont icon-gongzhonghao"></span>
                    <span class="iconfont icon-weibo"></span>
                    <span class="iconfont icon-qq"></span>
                    <p>0535_60652189<span class="iconfont icon-weibiaoti-"></span></p>
                </div>
            </div>
        </div>
        <div class="head_wrap_bottom">
            <div class="head_bottom">
                <div class="logo">
                    <img src="http://10.35.164.2/company/images/首页_02.jpg" alt="">
                </div>

            </div>
            <div class="head_bottom_position"> <span> 网站首页 > 传悦案例</span></div>
        </div>
    </header>
    <section>
        <div class="section">
            <ul class="content_click">
                <li class="con_onclick_li">全部</li>
                <li>网站建设</li>
                <li>推广运营</li>
                <li>品牌策划</li>
                <li>网络全案</li>
            </ul>
            <!-- 模板 -->
            <ul class="content_info_list">
                    <li class="model model_dis">
                            <a href="">
                            <img src="http://10.35.164.2/company/images/案例1.png" alt="">
                            <h3 class="title">众德集团 网站建设</h3>
                            <p class="fu_title">网站建设 品牌形象 整合营销 引导营销</p>
                        </a>
                    </li>
      
            </ul>
            <ul class="con_bottom">
                <li></li>
                <li><a href="">1</a></li>
                <li class="con_bottom_onclick_li"><a href="">2</a></li>
                <li><a href="">3</a></li>
                <li><a href="">4</a></li>
                <li></li>
            </ul>
        </div>
    </section>
    <footer>
        <div class="footer">
            <div class="footer_right">
                <ul class="footer_top">
                    <li>关于传悦</li>
                    <li>新闻动态</li>
                    <li>传悦观点</li>
                    <li>联系传悦</li>
                    <li>加入传悦</li>
                    <li>付款账户</li>
                </ul>
            <br>
                <div class="footer_info">Copyright @2013 &nbsp;&nbsp;创梦科技有限责任公司&nbsp;&nbsp;&nbsp;&nbsp;||&nbsp;&nbsp;&nbsp;&nbsp;传说 Chnyoo. cn All Rights Reserved &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;京ICP备12005221号
                </div>
            </div>
        </div>
    </footer>

</body>
</html>
<script src="http://10.35.164.2/company/xxk_onclick.js"></script>
<script>
    //导航部分选选项卡
    let onav_li = document.querySelectorAll("header .head_top .nav li");
    xuanxiangka(onav_li,"nav_onclick_li");

    // section 部分的选项卡部分
    let li_list = document.querySelectorAll("section .section .content_click li");
    xuanxiangka(li_list,"con_onclick_li");

    //选项卡函数
//onclick_list点击的列表 className所需样式所拥有的class名
function xuanxiangka(onclick_list,className){
    for(let i = 0;i<onclick_list.length; i++){
    onclick_list[i].onclick = function(){
        for(let j=0;j<onclick_list.length ;j++){
            onclick_list[j].className = "";
        }
        onclick_list[i].className = className;
    }
}

}


//链接数据库获取数据 克隆节点
let omodel = document.querySelector(".content_info_list .model");
let oul = document.querySelector("section .content_info_list")
// console.log(oul);
let http = new XMLHttpRequest();
http.open("get","http://10.35.164.2:81/company_all");
// http.open("get","http://192.168.43.24:81/company_all");
http.send();
http.onreadystatechange = function(){
    if(http.readyState === 4){
        let caselist = JSON.parse(http.response);
        // console.log(caselist);
        caselist.forEach(function(item,index){
            let newli = omodel.cloneNode(true);
            newli.className = "model";
            newli.setAttribute("data_index",item.id)
            oul.appendChild(newli);
            newli.querySelector("img").src = item.img_src;
            newli.querySelector(".title").innerHTML = item.title;
            newli.querySelector(".fu_title").innerHTML = item.fu_title;
            let id = newli.getAttribute("data_index");
            newli.querySelector("a").href = `http://10.35.164.2:81/company_list_click?id=${id}`;
            // 跳转链接
            newli.onclick = function(){
                let id = newli.getAttribute("data_index")
                let xml = new XMLHttpRequest();
                // console.log(id);

                // xml.open("get",`http://192.168.43.24:81/company_list_click?id=${id}`);
                xml.open("get",`http://10.35.164.2:81/company_list_click?id=${id}`);
                xml.send();
                xml.onreadystatechange = function(){
                    if(xml.readyState === 4){
                        console.log("success!")
                    }
                    // else{
                    //     alert("error!");
                    // }
                }

            }

        })
    }
}


</script>
